<template>
    <Layout title="采购订单管理" :showNew="true" @newEvt="myNewEvt">
        <header>
            <input v-model="projectName" type="text" placeholder="输入项目名字">
            <van-dropdown-menu class="search-box">
                <van-dropdown-item v-model="state" :options="states" />
            </van-dropdown-menu>
            <i>&#xe86e;</i>
        </header>
        <main>
            <!-- 添加滚动事件--onscroll -> @scroll -->
            <ul @scroll="scrollEvt">
                <van-swipe-cell v-for="it in list" :key="it.id">
                    <!-- 左边插槽 -->
                    <template #left>
                        <van-button style="height: 100%;" square type="primary" text="详情" />
                    </template>
                    <!-- 默认插槽 -->
                    <li>
                        <span class="t">{{it.projectName}} <em>{{it.state}}</em></span>
                        <span>创建人：{{it.createName}}</span>
                        <span>创建日期：{{it.createTime}}</span>
                        <span>创建材料：{{it.materialName}}</span>
                    </li>
                    <!-- 右边插槽 -->
                    <template #right>
                        <!--
                            状态：新建 -> 删除、编辑、审批--这个审批需要权限控制，登录用户需要有A权限，并且登录用户必须是审批人
                            状态：确认 -> 在途--这个按钮只能是建单人可以点击
                            状态：在途 -> 完成--这个按钮只能是建单人可以点击
                            状态：完成 -> 付款--这个按钮只能是建单人可以点击
                        -->
                        <!-- 删除业务一定要做二次确认 -->
                        <van-button @click="deleteEvt(it)" v-if="it.state === '新建'" style="height: 100%;" square type="danger" text="删除"/>
                        <van-button @click="editEvt(it)" v-if="it.state === '新建'" style="height: 100%;" square type="info" text="编辑"/>
                        <van-button @click="approveEvt(it)" v-if="it.state === '新建'" style="height: 100%;" square type="primary" text="审批"/>
                        <van-button @click="approveEvt(it)" v-if="it.state === '确认'" style="height: 100%;" square type="primary" text="在途"/>
                        <van-button @click="approveEvt(it)" v-if="it.state === '在途'" style="height: 100%;" square type="primary" text="完成"/>
                        <van-button v-if="it.state === '完成'" style="height: 100%;" square type="primary" text="收款"/>
                    </template>
                </van-swipe-cell>
                <!-- <li v-for="it in list" :key="it.id">
                    <span class="t">{{it.projectName}} <em>{{it.state}}</em></span>
                    <span>创建人：{{it.createName}}</span>
                    <span>创建日期：{{it.createTime}}</span>
                    <span>创建材料：{{it.materialName}}</span>
                </li> -->
                <li>
                    <!-- 需要两个参数，正在加载中，是否有更多数据 -->
                    <div v-if="loading">
                        <van-loading type="spinner" color="#10239e">正在加载中</van-loading>
                    </div>
                    <div v-else-if="hasMore">加载更多数据</div>
                    <div v-else>没有更多数据</div>
                </li>
            </ul>
        </main>

        
        <!-- 审批弹出框 -->
        <van-popup v-model="showApp" position="bottom" :style="{ height: '40%' }">
            <div class="popup-list full">
                <div>审批人：{{appObj.userName}}</div>
                <div>
                    <van-radio-group v-model="appObj.isReject" direction="horizontal">
                        <van-radio :name="true">驳回</van-radio>
                        <van-radio :name="false">通过</van-radio>
                    </van-radio-group>
                </div>
                <div>
                    意见：
                    <textarea v-model="appObj.remark"/>
                </div>
            </div>
        </van-popup>
    </Layout>
</template>

<script>
    import { purchaseDeleteApi, purchaseListApi } from '@/apis/homeApi'

    export default {
        data() {
            return {
                state: '',
                projectName: '',
                states: [
                    { text: '全部', value: '' },
                    { text: '新建', value: '新建' },
                    { text: '确认', value: '确认' },
                    { text: '在途', value: '在途' },
                    { text: '完成', value: '完成' },
                    { text: '作废', value: '作废' }
                ],
                list: [],
                // 页面进入的时候，一定要去加载第一页
                loading: true,
                // 当前加载第几页的数据
                page: 1,
                // 是否有更多数据
                hasMore: true,
                // 审批对象
                appObj: {
                    id: '',
                    isReject: '',
                    userId: '',
                    userName: '',
                    remark: ''
                },
                // 审批弹出框
                showApp: false
            }
        },

        computed: {
            userInfo() {
                return this.$store.getters['common/userInfo']
            }
        },

        created() {
            this.getList()
        },

        methods: {
            // 审批
            // 订单单号
            // id
            // 是否驳回--审批人选择
            // isReject
            // 审批人应该是固定--就是登录用户
            // userId
            // userName
            // 用户填写的审批信息
            // remark

            approveEvt(row) {
                this.appObj = {
                    id: row.id,
                    isReject: false,
                    userId: this.userInfo.id,
                    userName: this.userInfo.name,
                    remark: ''
                }
                this.showApp = true
            },
            // 编辑
            editEvt(row) {
                this.$router.push({path: '/purchase/edit', query: {type: 'edit', id: row.id}})
            },
            // 删除订单
            deleteEvt(row) {
                this.$dialog.confirm({
                        title: '删除确认',
                        message: '确定要删除此条订单'
                    })
                    .then(async () => {
                        let result = await purchaseDeleteApi(row.id)
                        if (result.code === 200) {
                            this.$toast.success('删除成功')
                            row.state = '作废'
                            // 真实业务，应该单独掉一个获取当前订单的详细接口，然后赋值给row对象
                        } else {
                            this.$toast.fail('删除失败，请重试')
                        }
                    })
                    .catch(() => {});
            },
            // 新增按钮事件
            myNewEvt() {
                this.$router.push('/purchase/edit')
            },
            // 页面滚动事件
            scrollEvt(evt) {
                // 实现一个加载节流的方法
                // 如果没有到底部不能加载，如果正在加载中不能去加载，如果没有更多数据不能去加载
                if (this.loading) return
                if (!this.hasMore) return

                // 是否到底部 -- 预留20个像素
                let isBottom = evt.target.scrollHeight - evt.target.clientHeight - evt.target.scrollTop < 32
                if (isBottom) {
                    // 修改加载状态
                    this.loading = true
                    // 要去加载下一页数据
                    this.page += 1
                    // 再去调用获取数据的方法
                    this.getList()
                }
            },
            async getList() {
                // 这个接口只会返回当前页的数据，为了数据传输量小
                let result = await purchaseListApi({
                    projectName: this.projectName,
                    state: this.state,
                    page: this.page,
                    size: 8
                })
                if (result.code === 200) {
                    // 应该是第一页，直接赋值，从第二页开始需要合并数据
                    this.list = this.page === 1 ? result.data.rows : this.list.concat(result.data.rows)
                    // 计算是否有更多数据 -- total 总数 > 当前页page * 每一页的数量size 得到已经获取的数据
                    this.hasMore = this.page * 8 < result.data.total
                }

                // 因为数据赋值和页面渲染是异步
                let _this = this
                setTimeout(function() {
                    _this.loading = false
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../../style/common.less';
    header {
        display: flex;
        height: 28px;
        padding: 10px 0;
        border-bottom: solid 1px @c8;
        > input {
            flex: 1;
            width: 0;
            height: 28px;
            border: none;
            outline: none;
            background: transparent;
            font-size: .75rem;
            padding: 0 12px;
            &::-webkit-input-placeholder {
                font-size: .65rem;
            }
        }
        > i {
            flex: 0 0 48px;
            width: 0;
            height: 28px;
            .hc-ft();
            text-align: center;
            line-height: 28px;
        }
    }
    main {
        display: block;
        height: calc(100% - 49px);
        > ul {
            list-style: none;
            display: block;
            height: 100%;
            padding: 0 10px;
            overflow-x: hidden;
            li {
                display: block;
                border-bottom: solid 1px @c8;
                padding: 8px 6px;
                &:last-child {
                    border-bottom: none;
                }
                > span {
                    display: block;
                    line-height: 24px;
                    font-size: .65rem;
                    color: #ccc;
                    &.t {
                        color: #1e1e1e;
                        font-size: .9rem;
                        line-height: 32px;
                    }
                    > em {
                        display: inline-block;
                        color: @c2;
                        font-size: .6rem;
                        margin-left: 6px;
                        font-style: normal;
                    }
                }
            }
        }
    }
</style>
